<template>
	<div>
		<el-row class="bg-top">
			<h3 class="baseHeader" style="text-align: left">开门速度写入</h3>
			<el-col :span="16">
				<div class="leftBox">
					<div class="chart" id="chart1"></div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="rightBox">
					<el-form :model="baseForm1" ref="baseForm1">
						<div class="leftcontent leftcontent1">
							<el-form-item class="selectDoor" prop="dcu" label="门控单元编号">
								<el-select v-model="baseForm1.dcuId" placeholder="请选择" @change="getdoorChange">
									<el-option v-for="(item, index) in options2" :key="index" :label="item.dcu"
										:value="item.dcu"></el-option>
								</el-select>
							</el-form-item>
							<div style=" width: 100%;display: flex;">
								<el-upload :headers="headers" :data="openData" :action="pedcUrl"
									:on-success="(res, file, fileList) => handleSuccess(res, file, fileList, 0)"
									class="upload-demo" :show-file-list="false"
									style="text-align: left;margin-right: 10px;">
									<el-button type="primary">
										加载
									</el-button>
								</el-upload>
								<el-button :disabled="writeStatus" type="primary" @click="writeOpendSpeed()">写入
								</el-button>

							</div>

						</div>
						<span style="width: 90%;margin:10px 0 0 10%;display: block;color:red">*软件默认开门速度的配置文件所在位置：
							d:\psc\examples\openCurve</span>
					</el-form>
				</div>
			</el-col>
		</el-row>
		<el-row class="bg-bottom">
			<h3 class="baseHeader" style="text-align: left">关门速度写入</h3>
			<el-col :span="16">
				<div class="leftBox">
					<div class="chart" id="chart2"></div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="rightBox">
					<el-form :model="baseForm2" ref="baseForm2">
						<div class="leftcontent leftcontent1">
							<el-form-item class="selectDoor" prop="dcu" label="门控单元编号">
								<el-select v-model="baseForm2.dcuId" placeholder="请选择" @change="getdoorChange1">
									<el-option v-for="(item, index) in options2" :key="index" :label="item.dcu"
										:value="item.dcu"></el-option>
								</el-select>
							</el-form-item>
							<div style="width: 100%;display: flex;">
								<el-upload :headers="headers" :data="closeData" :action="pedcUrl"
									:on-success="(res, file, fileList) => handleSuccess(res, file, fileList, 1)"
									class="upload-demo" :show-file-list="false"
									style="text-align: left;margin-right: 10px;">
									<el-button type="primary">
										加载
									</el-button>
								</el-upload>
								<el-button :disabled="writeStatus1" type="primary" @click="writeCloseSpeed()">写入
								</el-button>
							</div>
						</div>
						<span
							style="width: 90%;margin:10px 0 0 10%;display: block;color:red">*软件默认关门速度的配置文件所在位置：d:\psc\examples\closeCurve</span>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import debounce from "lodash/debounce";
import utils from "@/utils/utils";
import Cookies from 'js-cookie'
import { getOrder,getStep} from "@/utils";
export default {
	data() {
		this.curveChart1 = null;
		this.curveChart2 = null;
		return {
			baseForm1: {
				d1: "",
				d2: "",
				v1: "",
				v7: "",
				tTotal: "",
				dcuId: '全部',
			},
			baseForm2: {
				d1: "",
				d2: "",
				v1: "",
				v7: "",
				tTotal: "",
				dcuId: '全部',
			},
			openDoorSpeed: [],//开门速度
			openDoorSpeedX: [],//开门速度时间
			closeDoorSpeed: [],//关门速度
			closeDoorSpeedX: [],//关门速度时间
			options: utils.cpuType,
			options2: [],
			openDoorOption: null,//开门曲线的option
			closeDoorOption: null,//关门曲线的option
			openWriteStatus: true,
			closeWriteStatus: true,
			SpeedOptions: [],
			doorQx: "",
			dcuId1: '',
			dcuId2: '',
			headers: {
				'Authorization': Cookies.get('token'),
			},
			pedcUrl: window.SITE_CONFIG['apiURL'] + '/psc/dcu/generateCurve',
			stepUp: 0,//上行门的step值
			stepDown: 0,//下行门的step值
			writeStatus:true,
			writeStatus1:true,
			openData:{
				'action':'open'
			},
			closeData:{
				'action':'close'
			}
		};
	},
	watch: {
		"baseForm1.dcuId": {
			handler(val) {
				if (this.baseForm1.dcuId == '全部') {
					this.dcuId1 = 0
				}
			},
			deep: true,
			immediate: true,
		},
		"baseForm2.dcuId": {
			handler(val) {
				if (this.baseForm2.dcuId == '全部') {
					this.dcuId2 = 0
				}
			},
			deep: true,
			immediate: true,
		},
	},
	mounted() {
		this.getdoorList();
		this.initEcharts1();
		this.initEcharts2();
	},
	beforeDestroy() {
		this.curveChart1.dispose();
		this.curveChart2.dispose();
		this.curveChart1 = null;
		this.curveChart2 = null;
	},
	methods: {
		// 上传成功
		handleSuccess(res, file, fileList, val) {
			if (res.code == 0) {
				this.$message({
					message: '加载成功',
					type: "success",
					duration: 500,
				});
				console.log(this.baseForm1.dcuId,'Id数据')
				if (val == 0) {
					this.writeStatus = false
					var dataX = 0;
					this.openDoorSpeedX = [0];
					this.openDoorSpeed = [0]
					for (var i = 0; i < res.data.points.length; i++) {
						// dataX = this.commonAdd(dataX, res.data.points[i].t);
						this.openDoorSpeedX.push(res.data.points[i].t);
						this.openDoorSpeed.push(Number(res.data.points[i].v));
					}
					this.openDoorSpeedX.push(res.data.params.tTotal)
					this.openDoorSpeed.push(0)
					this.curveChart1.clear();
					this.curveChart1.setOption(this.openDoorOption);
					this.initEcharts1();
					this.baseForm1.d1 = res.data.params.d1
					this.baseForm1.d2 = res.data.params.d2
					this.baseForm1.v1 = res.data.params.v1
					this.baseForm1.v7 = res.data.params.v7
					this.baseForm1.tTotal = res.data.params.tTotal
					// this.baseForm1 = res.data.params
					this.baseForm1.dcuId = this.dcuId1 == 0 ? '全部' : this.baseForm1.dcuId
				} else {
					this.writeStatus1 = false
					var dataX = 0;
					this.closeDoorSpeedX = [0];
					this.closeDoorSpeed = [0]
					for (var i = 0; i < res.data.points.length; i++) {
						// dataX = this.commonAdd(dataX, res.data.points[i].t);
						this.closeDoorSpeedX.push(res.data.points[i].t);
						this.closeDoorSpeed.push(Number(res.data.points[i].v))
					}
					this.closeDoorSpeedX.push(res.data.params.tTotal)
					this.closeDoorSpeed.push(0)
					this.curveChart2.clear();
					this.curveChart2.setOption(this.closeDoorOption);
					this.initEcharts2();
					this.baseForm2.d1 = res.data.params.d1
				     this.baseForm2.d2 = res.data.params.d2
				     this.baseForm2.v1 = res.data.params.v1
				    this.baseForm2.v7 = res.data.params.v7
				    this.baseForm2.tTotal= res.data.params.tTotal
					// this.baseForm2 = res.data.params
					this.baseForm2.dcuId = this.dcuId2 == 0 ? '全部' : this.baseForm2.dcuId
				}

			} else {
				this.writeStatus = true
				this.writeStatus1 = true
				return this.$message.error(res.msg);
			}
		},
		//返回的时间相加
		commonAdd(number1, number2) {
			let result = 0;
			if (Number.isInteger(number1) || Number.isInteger(number2)) {
				result = number1 + number2;
			} else {
				//两个都是纯小数
				const number1Array = number1.toString().split(".");
				const number2Array = number2.toString().split(".");
				//最大的除数位数
				let maxBit = 1;
				if (number1Array[1].length >= number2Array[1].length) {
					maxBit = number1Array[1].length + 1;
				} else {
					maxBit = number2Array[1].length + 1;
				}
				const divisor = parseInt("1".padEnd(maxBit, 0));
				result = (number1 * divisor + number2 * divisor) / divisor;
			}
			return result;
		},
		getdoorChange(val) {
			var stationSide = ''
			this.options2.forEach(item => {
				if (val == item.dcu) {
					stationSide = item.stationSide
				}
			})
			if (val == '全部') {
				this.dcuId1 = 0
				this.baseForm1.dcuId = '全部'
			} else {
				let v = Number(val);
				this.baseForm1.dcuId = val
				if (stationSide == 1) {
					this.dcuId1 = v - this.stepUp;
				} else if (stationSide == 0) {
					this.dcuId1 = v - this.stepDown + 128;
				}
			}
			
			this.$forceUpdate();
		},
		getdoorChange1(val) {
			var stationSide = ''
			this.options2.forEach(item => {
				if (val == item.dcu) {
					stationSide = item.stationSide
				}
			})
			if (val == '全部') {
				this.dcuId2 = 0
				this.baseForm2.dcuId = '全部'
			} else {
				let v = Number(val);
				if (stationSide == 1) {
					this.dcuId2 = v - this.stepUp;
				} else if (stationSide == 0) {
					this.dcuId2 = v - this.stepDown + 128;
				}

			}
			this.$forceUpdate();
		},
		writeOpendSpeed: debounce(
			function () {
				if (!this.baseForm1.dcuId) {
					return this.$message.error('请选择门控单元编号');
				}
				let obj = {
					dcuId: this.dcuId1,
					d1: this.baseForm1.d1,
					d2: this.baseForm1.d2,
					v1: this.baseForm1.v1,
					v7: this.baseForm1.v7,
					t: this.baseForm1.tTotal,
				};
				this.$http
					.post("/psc/dcu/writeOpenCurve", obj)
					.then((res) => {
						if (res.data.code !== 0) {
							this.$confirm(res.data.msg, '提示', {
							    type: 'warning',
								showCancelButton:false,
								showConfirmButton:false,
								customClass:'tip-model',
								dangerouslyUseHTMLString: true,
							}).then(() => {
							         
							}).catch(() => {
								            
							});
							// return this.$message.error(res.data.msg);
						}
						this.$message({
							message: this.$t("prompt.success"),
							type: "success",
							duration: 500,
						});
					})
					.catch(() => { });
			},
			1000, {
			leading: true,
			trailing: false,
		}
		),
		writeCloseSpeed: debounce(
			function () {
				if (!this.baseForm2.dcuId) {
					return this.$message.error('请选择门控单元编号');
				}
				let obj = {
					dcuId: this.dcuId2,
					d1: this.baseForm2.d1,
					d2: this.baseForm2.d2,
					v1: this.baseForm2.v1,
					v7: this.baseForm2.v7,
					t: this.baseForm2.tTotal,
				};
				this.$http
					.post("/psc/dcu/writeCloseCurve", obj)
					.then((res) => {
						if (res.data.code !== 0) {
							
							this.$confirm(res.data.msg, '提示', {
							    type: 'warning',
								showCancelButton:false,
								showConfirmButton:false,
								customClass:'tip-model',
								dangerouslyUseHTMLString: true,
							}).then(() => {
							         
							}).catch(() => {
								            
							});
							// return this.$message.error(res.data.msg);
						}
						this.$message({
							message: this.$t("prompt.success"),
							type: "success",
							duration: 500,
						});
					})
					.catch(() => { });
			},
			1000, {
			leading: true,
			trailing: false,
		}
		),
		getdoorList() {
			this.$http.get("/psc/door/getDoor").then((res) => {
				this.options2 = res.data.data.up.concat(res.data.data.down);
				//获取上下行数据要增加和减少的值-----2023年5月26日
				this.stepUp = getStep(res.data.data.up)
				this.stepDown = getStep(res.data.data.down)
				// console.log( this.stepUp,this.stepDown,'上下行的step的值')
				//获取上下行数据要增加和减少的值-----2023年5月26日
				for (var i = 0; i < this.options2.length; i++) {
					if (
						this.options2[i].doorType === 0 ||
						this.options2[i].doorType === 2
					) {
						this.options2.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
						i--; // 如果不减，将漏掉一个元素
					}
				}
				var obj = {
					dcu: '全部',
				}
				this.options2.unshift(obj)
			});
		},
		initEcharts1() {
			this.curveChart1 = this.$echarts.init(document.getElementById("chart1"));
			var that = this;
			var fontColor = "#30eee9";
			this.openDoorOption = {
				backgroundColor: "transparent",
				grid: {
					left: "5%",
					right: "2%",
					top: "10%",
					bottom: "15%",
				},
				tooltip: {
					show: true,
					trigger: "axis",
					axisPointer: {
						type: "shadow",
						lineStyle: {
							color: "#57617B",
						},
					},
				},
				xAxis: {
					type: "category",
					axisLine: {
						show: true,
						lineStyle: {
							color: "#000000",
						},
					},
					axisTick: {
						show: false,
						alignWithLabel: true,
						lineStyle: {
							color: "#000000",
						},
					},
					axisLabel: {
						fontSize: 16,
						show: true,
					},
					boundaryGap: false, // 显示间距设置为false
					data: that.openDoorSpeedX,
				},
				yAxis: {
					name: "速度",
					type: "value",
					min: 0,
					max: Math.max(...this.openDoorSpeed),
					axisLine: {
						show: true,
						lineStyle: {
							color: "#000000",
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: "dotted",
							color: "#000000",
						},
					},
					axisTick: {
						show: true,
					},
					axisLabel: {
						fontSize: 16,
					},
					boundaryGap: ["20%", "20%"],
				},
				series: [{
					name: "",
					type: "line",
					stack: "总量",
					smooth: true,
					symbol: "none",
					showSymbol: false,
					symbolSize: 8,
					lineStyle: {
						color: "#6495ED",
						width: 5,
					},
					markPoint: {
						itemStyle: {
							color: "red",
						},
					},
					data: this.openDoorSpeed,
				},],
			};
			this.curveChart1.setOption(this.openDoorOption);
			window.addEventListener("resize", () => {
				this.curveChart1.resize();
			});
		},
		initEcharts2() {
			this.curveChart2 = this.$echarts.init(document.getElementById("chart2"));
			var that = this;
			var fontColor = "#30eee9";
			this.closeDoorOption = {
				backgroundColor: "transparent",
				grid: {
					left: "5%",
					right: "2%",
					top: "10%",
					bottom: "15%",
				},
				tooltip: {
					show: false,
					trigger: "axis",
					axisPointer: {
						type: "shadow",
						lineStyle: {
							color: "#57617B",
						},
					},
				},
				xAxis: {
					type: "category",
					axisLine: {
						show: true,
						lineStyle: {
							color: "#000000",
						},
					},
					boundaryGap: false, // 显示间距设置为false
					axisTick: {
						show: false,
						alignWithLabel: true,
						lineStyle: {
							color: "#000000",
						},
					},
					axisLabel: {
						fontSize: 16,
						show: true,
					},
					data: that.closeDoorSpeedX,
				},
				yAxis: {
					name: "速度",
					type: "value",
					min: 0,
					max: Math.max(...this.closeDoorSpeed),
					axisLine: {
						show: true,
						lineStyle: {
							color: "#000000",
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: "dotted",
							color: "#000000",
						},
					},
					axisTick: {
						show: true,
					},
					axisLabel: {
						fontSize: 16,
					},
					boundaryGap: ["20%", "20%"],
				},
				series: [{
					name: "",
					type: "line",
					stack: "总量",
					smooth: true,
					symbol: "none",
					showSymbol: false,
					symbolSize: 8,
					lineStyle: {
						color: "#FFD700",
						width: 5,
					},
					markPoint: {
						itemStyle: {
							color: "red",
						},
					},
					data: this.closeDoorSpeed,
				},],
			};
			this.curveChart2.setOption(this.closeDoorOption);
			window.addEventListener("resize", () => {
				this.curveChart2.resize();
			});
		},
	},
};
</script>
<style scoped>
.selectDoor>>>.el-select {
	width: 100%;
}

.bg-top {
	/* height: 44vh; */
	background-color: #fff;
	border-radius: 10px;
	padding: 1.8vh 1.5vw 0.9vh 1.5vw;
}

.bg-bottom {
	/* height: 44vh; */
	margin-top: 1.85vh;
	background-color: #fff;
	border-radius: 10px;
	padding: 1.8vh 1.5vw 0.9vh 1.5vw;
}

.baseHeader {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: rgba(46, 48, 51, 1);
}

.leftBox {
	height: 37.4vh;
}

.rightBox {
	/* height: 37.4vh; */
	/* padding: 1.29vh 7.39vw 0 7.39vw; */
}

.chart {
	width: 100%;
	height: 100%;
}

.rightBox>>>.el-input__inner {
	/* width: 10.4vw; */
}

.leftcontent {
	width: 40%;
}

.leftcontent1 {
	margin-left: 10%;
}

@media screen and (max-width: 1580px) {
	.leftcontent1 {
		width: 50%;
	}
}

@media screen and (max-width: 1280px) {
	.leftcontent1 {
		width: 50%;
	}
}
</style>
